<style>
  .tpl .content-left{
    width: 120px;
    float: left;
  }
  .tpl .content-right{
    /*width: calc(100% - 140px);*/
    /*float: right;*/
  }
</style>
<template>
  <main class="tpl">
    <section class="clearfix">
      <!--<section class="content-box content-left">-->
      <!--<article style="min-height: auto" @click="update(1,modals[1])">-->
      <!--<models :data.sync="modals[1]"></models>-->
      <!--</article>-->
      <!--</section>-->
      <section  class="content-box content-right" style="width: 100%">
        <article style="min-height: auto" @click="update(0,modals[0])">
          <models :data.sync="modals[0]">
            <ul class="item">
              <li v-for="item in list" class="list-item">
                <div class="img-box">
                  <img :src="item.image" alt="">
                </div>
                <h5 class="ellipsis">{{item.name}}</h5>
                <p class="ellipsis" style="max-width: 600px">{{item.description}}</p>
              </li>
            </ul>
          </models>
        </article>
      </section>
    </section>
  </main>
</template>

<script>
  import tpl from './tplmixin'

  export default {
    data () {
      return {
        modals: [
          {
            type:9,
            title: '',
            types: '',
            classId: ''
          },
//        {
//          type:'list',
//          types:'',
//          title:'',
//          class:'',
//          disable:true
//        }
        ],
        list:[],
        param:{
          "content": "",
          "displayOrder": 0,
          "enabled": true,
          "langKey": "",
          "name": "",
          "templateId": 0,
          "templateName": "",
          "url": "",
          "websiteId": 0,
          "websiteName": ""
        }
      }
    },
    watch:{
      modals: function(){
        let vm = this
        if(vm.modals[0].classId||vm.param.content){
          this.$http.get('information/api/categories/'+(vm.modals[0].classId?vm.modals[0].classId:vm.param.content)+'/information',{}).then(function(res){
            vm.list = res.data.content
          })
        }

      }
    },
    methods:{
      getDetail () {
        let vm = this
        this.$http.get('cms/api/pages/'+vm.$route.query.id,{}).then(function(res){
          vm.param = res.data
          vm.modals = [
            {
              type:9,
              title: '',
              types: '',
              classId: res.data.content
            }
          ]
        })
      },
      sub () {
        let vm = this
        vm.param.content = vm.modals[0].classId
        this.$http.put('cms/api/pages',Object.assign({id:vm.$route.query.id},vm.param)).then(function(res){
          vm.getDetail()
          vm.$http.get('menu/api/items/'+vm.$route.query.menuId,{}).then(function(data){
            let params = data.data
            params.url = data.data.url.indexOf('?')>-1?(data.data.url.split('?')[0]+'?productId='+vm.$route.query.id+'&typeId='+(vm.modals[0].classId?vm.modals[0].classId:vm.param.content)):(data.data.url+'?productId='+vm.$route.query.id)
            vm.$http.put('menu/api/items',Object.assign({id:vm.menuId},params)).then(function(){
            })
          })
        })
      },
      see () {
        let vm = this
        window.open('http://118.242.0.43:7060/item.html?id='+this.$route.query.menuId+'&productId='+this.$route.query.id+'&typeId='+(vm.modals[0].classId?vm.modals[0].classId:vm.param.content))
      }
    },
    mounted () {
      this.getDetail()
      let vm = this
      this.$parent.$parent.sub = vm.sub
      this.$parent.$parent.see = vm.see
    },
    mixins:[tpl],

  }

</script>
